@extends('layouts.default')

@section('title', '任教学科')

@push('scripts')
<script src="{{ asset('lib/xm-select-v1.2.4/xm-select.js')}}"></script>
<script>
    layui.use(['layer','form','table','laytpl','laydate','element','laypage','upload'], function(){
        var layer = layui.layer;
        var form = layui.form;
        var table = layui.table;
        var laytpl = layui.laytpl;
        var laydate = layui.laydate;
        var element = layui.element;
        var laypage = layui.laypage;
        var upload = layui.upload;
        var xmDemo;
        var xmDemo2;
        var xmDemo3; //调取资料时间
        var xmDemo4; //岗位级别
        var id = "{{request()->get('id',0)}}";
        var files = []; //上传的文件数组

        laydate.render({
            elem: '#check_start'
        });
        laydate.render({
            elem: '#check_end'
        });
        laydate.render({
            elem: '#submit_start'
        });
        laydate.render({
            elem: '#submit_end'
        });

    

        renderSelect(function(){
            //编辑
            if(id != 0){
                getJobFirst({'id':id},function(res){
                    if(res.code == 1){
                        form.val("formTest", { //formTest 即 class="layui-form" 所在元素属性 lay-filter="" 对应的值                     
                            'data_version_id': res.data.data_version_id,
                            'name': res.data.name,
                            'comment': res.data.comment,
                            'check_start': res.data.check_start,
                            'check_end': res.data.check_end,
                            'submit_start': res.data.submit_start,
                            'submit_end': res.data.submit_end,
                            'sum': res.data.sum,
                            'id': res.data.id,
                            'scale_id': res.data.scale_id,
                          
                        });
                        //考评成员
                        xmDemo.setValue(res.data.members_array.value);
                        //考评组长
                        xmDemo2.setValue(res.data.leader_array.value);
                        //岗位级别
                        xmDemo4.setValue(res.data.level_array);
                        //调取资料时间
                        xmDemo3.setValue(res.data.materials_array);
                        //上传文件
                        if(res.data.files_array.length>0){                   
                            layui.each(res.data.files_array, function(i, d) {                              
                                files.push(d);
                                $('input[name=files]').val(JSON.stringify(files));
                                $('#test3').parent().find('.file-show').html('');
                                for(i in files) {
                                    if(files[i]) {
                                        let fsHtml = '<div class="file-item"><span class="file-name">'+files[i].file_name+'</span><span class="layui-icon layui-icon-close-fill" onClick="fileDelete('+i+', 1)"></span></div>';
                                        $('#test3').parent().find('.file-show').append(fsHtml); 
                                    }
                                }                             
                            });
                        }                     
                    }
                })
            }
        });

        //下拉框初始化
        async function renderSelect(callback){
             //获取字典下拉框数据
            await new Promise((resolve) => {
                getDictionaryItem({'diccode': ['title_teacher_rank']}, function (res){
                    if(res.code === 1) { 
                        let data =  res.data.title_teacher_rank;
                        delete data[13];
                        xmDemo4 = xmSelect.render({
                            el: '#demo4',                            
	                        autoRow: true,
                            theme: {
                                color: '#2d8cf0',
                            },
                            prop: {
                                name: 'selectValue',
                                value: 'selectKey',
                            },
                            name:'level',
                            layVerify: 'required',
                            layVerType: 'msg',
                            layReqText:'岗位级别不能为空',
                            data: data
                        })
                        return resolve();
                    }
                });
            }); 

             //获取学期
            await new Promise((resolve) => {
                getTermData({},function(res){
                    if(res.code == 1){
                        $('select[name=data_version_id]').empty();
                        $('select[name=data_version_id]').append('<option value="">请选择</option>');
                        for(var i in res.data){
                            $('select[name=data_version_id]').append('<option value="'+res.data[i].id+'">'+res.data[i].title+'</option>');
                        }
                        form.render(); 
                        //调取资料时间
                        xmDemo3 = xmSelect.render({
                            el: '#demo3',                            
	                        autoRow: true,
                            theme: {
                                color: '#2d8cf0',
                            },
                            prop: {
                                name: 'title',
                                value: 'id',
                            },
                            name:'materials_date',
                            layVerify: 'required',
                            layVerType: 'msg',
                            layReqText:'调取资料时间不能为空',
                            data: res.data
                        })
                        return resolve();
                    }
                })
            }) 

            //参与人
            await new Promise((resolve) => {
                getParticipantsData({},function(res){
                    if(res.code == 1){
                        xm_select1(res.data);
                        return resolve();                             
                    }
                })
            })

            //主持人
            await new Promise((resolve) => {
                getParticipantsData({},function(res){
                    if(res.code == 1){
                        xm_select2(res.data);
                        return resolve();                             
                    }
                })
            }) 

            //量表
            await new Promise((resolve) => {
                getJobScale({},function(res){
                    if(res.code == 1){
                        $('select[name=scale_id]').append('<option value="">请选择</option>');
                        for(var i in res.data){
                            $('select[name=scale_id]').append('<option value="'+res.data[i].id+'">'+res.data[i].name+'</option>');
                        }
                        form.render(); 
                        return resolve();                             
                    }
                })
            }) 
        
            callback();
        }  

        upload.render({
            elem: '#test3'
            ,url: "{{route('uploads.upload')}}" //此处配置你自己的上传接口即可
            ,accept: 'file' //普通文件
            ,multiple: true
            ,choose: function(obj){
                //上传loading
                showloading(true);
            }
            ,allDone: function(obj){ //当文件全部被提交后，才触发
                showloading(false);
                if(obj.total == obj.successful) {
                    layer.msg('上传成功');
                } else {
                    layer.msg(obj.failed + '个文件上传失败！');
                }
            }
            ,done: function(res){
                files.push(res.data);            
                $('input[name=files]').val(JSON.stringify(files));
                $('#test3').parent().find('.file-show').html('');
                for(i in files) {
                    if(files[i]) {
                        let fsHtml = '<div class="file-item"><span class="file-name">'+files[i].file_name+'</span><span class="layui-icon layui-icon-close-fill" onClick="fileDelete('+i+', 1)"></span></div>';
                        $('#test3').parent().find('.file-show').append(fsHtml); 
                    }
                }
            }
        });

        //删除文件
        window.fileDelete = function (fk, ft) {
            if(ft == 1) {
                delete files[fk];
                $('input[name=files]').val(JSON.stringify(files));
                $('#test3').parent().find('.file-show').html('');
                for(i in files) {
                    if(files[i]) {
                        let fsHtml = '<div class="file-item"><span class="file-name">'+files[i].file_name+'</span><span class="layui-icon layui-icon-close-fill" onClick="fileDelete('+i+', 1)"></span></div>';
                        $('#test3').parent().find('.file-show').append(fsHtml);
                    }
                }
            }
        }

        //提交
        form.on('submit(formDemo)', function(data){
            data.field.level = xmDemo4.getValue('value');
            data.field.level_text = xmDemo4.getValue('nameStr');
            data.field.materials_date = xmDemo3.getValue('value');
            data.field.materials_text = xmDemo3.getValue('nameStr');
            data.field.members = xmDemo.getValue();
            data.field.leader = xmDemo2.getValue();

            data.field.status = 1;
            addJob(data.field,function(res){
                if(res.code == '1'){
                    layer.msg(res.msg,{icon: 6,time: 1000},function(){
                        window.history.back();
                    });
                }else{
                    layer.msg(res.msg, {icon: 5,shift : 6});
                }
           })
            return false;
        });

        //保存
        $('#formSave').click(function(){
            var isValid = form.validate('.data_version_id');
            if(!isValid){
                return false;
            }
            var data = form.val("formTest");   
            data.level = xmDemo4.getValue('value');
            data.level_text = xmDemo4.getValue('nameStr');
            data.materials_date = xmDemo3.getValue('value');
            data.materials_text = xmDemo3.getValue('nameStr');
            data.members = xmDemo.getValue();
            data.leader = xmDemo2.getValue();
            data.status = 0;
            addJob(data,function(res){
                if(res.code == '1'){
                    layer.msg(res.msg,{icon: 6,time: 1000},function(){
                        window.history.back();
                    });
                }else{
                    layer.msg(res.msg, {icon: 5,shift : 6});
                }
           })
            return false;
        })

        //考评成员
        function xm_select1(data){
            xmDemo = xmSelect.render({
                el: '#demo1', 
                autoRow: true,
                filterable: true,
                tree: {
                    show: true,
                    showFolderIcon: true,
                    showLine: true,
                    indent: 20,
                    expandedKeys:false
                },             
                filterable: true,
                height: 'auto',
                name:'members',
                layVerify: 'required',
                layVerType: 'msg',
                layReqText:'考评成员不能为空',
                theme: {
                    color: '#2d8cf0',
                },
                searchTips:'关键字搜索',
                direction: 'down',
                data: function(){
                    return data
                }
            })
        }

        //考评组长
        function xm_select2(data){
            xmDemo2 = xmSelect.render({
                el: '#demo2', 
                autoRow: true,
                filterable: true,
                tree: {
                    show: true,
                    showFolderIcon: true,
                    showLine: true,
                    indent: 20,
                    expandedKeys:false
                },             
                filterable: true,
                height: 'auto',
                name:'leader',
                layVerify: 'required',
                layVerType: 'msg',
                layReqText:'考评组长不能为空',
                theme: {
                    color: '#2d8cf0',
                },
                searchTips:'关键字搜索',
                direction: 'down',
                data: function(){
                    return data
                }
            })
        }

               
    });
</script>
@endpush

@section('content')
<style>
    .opt-panel{padding: 20px;}
    .panel-title h3{font-weight: 800;margin-bottom: 20px;}

    #add-form{padding: 20px 5px;}
    .opt-area{display: flex;flex-direction: row-reverse;padding: 10px 20px;margin-bottom: 20px;}
    .opt-area button{margin-left: 10px;}
</style>

<div class="layui-row">
    <div class="layui-panel opt-panel">
        <div class="panel-title">
            <h3>岗位竞聘 - @if(!empty($_GET['id']))编辑@else新增@endif</h3>
        </div>
        <form class="layui-form" action="" lay-filter="formTest">
            <div class="layui-row">
                <div class="layuik-form-item layuik-columns-two">
                    <div class="layuik-inline">
                        <label class="layuik-form-label"><i class="redstar">*</i>学年学期：</label>
                        <div class="layuik-input-inline">
                            <select class="data_version_id" name="data_version_id" lay-filter="termList" data-role="termList" lay-verify="required" lay-reqText="学年学期不能为空"></select>
                        </div>
                    </div>
                    <div class="layuik-inline">
                        <label class="layuik-form-label"><i class="redstar">*</i>岗位名称：</label>
                        <div class="layuik-input-inline">
                            <input type="text" name="name" required lay-verify="required" placeholder="请输入" lay-reqText="岗位名称不能为空" autocomplete="off" class="layui-input">
                        </div>
                    </div>
                </div> 

                <div class="layuik-form-item layuik-columns-two">
                    <div class="layuik-inline">
                        <label class="layuik-form-label"><i class="redstar">*</i>岗位级别：</label>
                        <div class="layuik-input-inline">
                            <div type="text" id="demo4"  class="xm-select-demo"></div>
                        </div>
                    </div>
                    <div class="layuik-inline">
                        <label class="layuik-form-label"><i class="redstar">*</i>空缺数量：</label>
                        <div class="layuik-input-inline">
                            <input type="text" name="sum" required lay-verify="number" placeholder="请输入" lay-reqText="空缺数量不能为空" autocomplete="off" class="layui-input">
                        </div>
                    </div>
                </div> 

                <div class="layuik-form-item layuik-columns-two">
                    <div class="layuik-inline">
                        <label class="layuik-form-label"><i class="redstar">*</i>申报起止时间：</label>
                        <div class="layuik-input-inline" style="width:38%">
                            <input type="text" name="submit_start" id="submit_start" required lay-verify="required" placeholder="请输入" lay-reqText="申报开始不能为空" autocomplete="off" class="layui-input">
                        </div>
                        <div class="layui-form-mid" style="width: 2%;text-align: right;" >-</div>
                        <div class="layuik-input-inline" style="width:38.5%;">
                            <input type="text" name="submit_end" id="submit_end" required lay-verify="required" placeholder="请输入" lay-reqText="申报结束不能为空" autocomplete="off" class="layui-input">
                        </div>
                    </div>

                    <div class="layuik-inline">
                        <label class="layuik-form-label"><i class="redstar">*</i>考核起止时间：</label>
                        <div class="layuik-input-inline" style="width:38%">
                            <input type="text" name="check_start" id="check_start" required lay-verify="required" placeholder="请输入" lay-reqText="考核开始不能为空" autocomplete="off" class="layui-input">
                        </div>
                        <div class="layui-form-mid" style="width: 2%;text-align: right;" >-</div>
                        <div class="layuik-input-inline" style="width:38.5%;">
                            <input type="text" name="check_end" id="check_end" required lay-verify="required" placeholder="请输入" lay-reqText="考核结束不能为空" autocomplete="off" class="layui-input">
                        </div>
                    </div>                  
                </div>

                <div class="layuik-form-item layuik-columns-two">
                    <div class="layuik-inline">
                        <label class="layuik-form-label"><i class="redstar">*</i>调取资料时间：</label>
                        <div class="layuik-input-inline">
                        <div type="text" id="demo3"  class="xm-select-demo"></div>
                        </div>
                    </div>
                    <div class="layuik-inline">
                        <label class="layuik-form-label"><i class="redstar">*</i>考评量表：</label>
                        <div class="layuik-input-inline">
                            <select  name="scale_id"  lay-verify="required" lay-reqText="考评量表不能为空"></select>
                        </div>
                    </div>
                </div> 

                <div class="layuik-form-item ">
                    <div class="layuik-inline">
                        <label class="layuik-form-label">申报说明：</label>
                        <div class="layuik-input-inline" style="width: 85%;">
                        <textarea  name="comment" placeholder="请输入内容" class="layui-textarea"></textarea>
                        </div>
                    </div>              
                </div>

                <div class="layuik-form-item layuik-columns-two">
                    <div class="layuik-inline">
                        <label class="layuik-form-label">相关材料：</label>
                        <div class="layuik-input-inline layuik-upload">
                        <button type="button" class="layui-btn layui-btn-normal" id="test3"><i class="layui-icon"></i>上传文件</button>
                        <div class="file-show"></div>
                        <input style="display:none" type="text" name="files"  value="">
                        </div>                    
                    </div>  
                </div> 

                <div class="layuik-form-item ">
                    <div class="layuik-inline">
                        <label class="layuik-form-label"><i class="redstar">*</i>考评组长：</label>
                        <div class="layuik-input-inline" style="width: 85%;">
                        <div type="text" id="demo2"  class="xm-select-demo"></div>
                        </div>
                    </div>  
                </div> 


                <div class="layuik-form-item ">
                    <div class="layuik-inline">
                        <label class="layuik-form-label"><i class="redstar">*</i>考评成员：</label>
                        <div class="layuik-input-inline" style="width: 85%;">
                        <div type="text" id="demo1"  class="xm-select-demo"></div>
                        </div>
                    </div>  
                </div> 


                

                <input type="hidden" name="id" value="" >
          
            </div>
            
            <div class="layui-row">
                <div class="opt-area">
                    <a href="javascript:history.go(-1);" ><button class="layui-btn layui-btn-primary" type="button">返回</button></a>
                    <button class="layui-btn layui-btn-primary" type="button"  id="formSave" style="color:#2d8cf0;" >保存</button>
                    <button class="layui-btn layui-btn-normal"  lay-submit lay-filter="formDemo">提交</button>
                </div> 
            </div>
        </form>
    </div>   
</div>
  
@endsection